/**
 *  echarts tooltip 自动轮播
 *  @param dom     // 图表的dom
 *  @param myChart  // 初始化echarts的实例
 *  @param option   // 指定图表的配置项和数据
 *  @param length      // 类目数量(原因：循环时达到最大值后，使其从头开始循环)， x轴有几项就填几
 *  @param pageSize      // 一页显示的数据数目
 *  @param timeObj     // 轮播定时器记录
 *  @param time     // 轮播间隔时长
 */
// 比如length是12，一页显示9个数据 == pageSize
export function autoHover (dom, myChart, option, length, pageSize, timeObj, time) {
  function circleHandler () {
    count = count % length;
    let center = Math.floor(pageSize / 2);  // 4
    if (pageSize < length) {  // 因为一页显示不满 所以才显示滚动条
      // 如果当前下标在中间值后面 则 滚动条不动
      if (count <= center) {
        console.log("count <= center", count)
        // 先滚动条走到最刚开始 再高亮
        option.dataZoom[0].endValue = pageSize - 1;
        option.dataZoom[0].startValue = 0;
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count > center && option.dataZoom[0].endValue != (length - 1)) {  // 如果当前小标大于中间值并且滚动条还没到最后，走滚动条
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        myChart.setOption(option);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0, //serieIndex的索引值   可以触发多个
          dataIndex: count - 1
        });
        setHighLight(myChart, count);
      } else if (count < (length - 1) && option.dataZoom[0].endValue == (length - 1)) {  // 如果滚动条到最后
        option.dataZoom[0].endValue = (length - 1);
        option.dataZoom[0].startValue = (length - 1) - (pageSize - 1);
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count == (length - 1)) {  // 下标结束了
        setHighLight(myChart, count);
      }
    } else {
      setHighLight(myChart, count);
    }
    count++;
    if (count >= length) {
      count = 0
    }
  }
  var count = 0;
  timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  timeObj.timeTicket = null;
  timeObj.timeTicket = setInterval(circleHandler, time);
  // 设置移入移除
  dom.addEventListener("mouseover", () => {
    console.log("dom==mouseover")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  })
  dom.addEventListener("mouseout", () => {
    console.log("dom==mouseout")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
    timeObj.timeTicket = setInterval(circleHandler, time);
  })
}
function setHighLight (myChart, count) {
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0, //serieIndex的索引值   可以触发多个
    dataIndex: count
  });
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: count
  });
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: count
  });
}
export default {
  autoHover
}